<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Todo List</title>
    <!-- import Vue.js -->
    <script src="libs/vue/vue.min.js"></script>
    <!-- import stylesheet -->
    <link rel="stylesheet" href="libs/iview/iview.css">
    <!-- import iView -->
    <script src="libs/iview/iview.min.js"></script>
    <!-- import axios -->
    <script src="libs/axios/axios.min.js"></script>
    <!-- import date -->
    <script src="libs/datejs/date-zh-CN.js"></script>
    <style>

        body div li {
            font-size: 14px;
            cursor: pointer;
            margin: 6px;
        }
        .hilight {
            /*background: #f8f8f9;*/
            background: #e8eaec;
        }

        html, body {
            height: 100%;
        }

        #app {
            height: inherit;
        }

        .main-layout {
            height: inherit;
        }

        .layout-header-center {
            text-align: center;
        }

        .layout-footer-center {
            color: #999999;
            text-align: center;
        }

        .finished {
            font-style: inherit;
            color: #C0C0C0;
            text-decoration: line-through;
        }
    </style>
</head>
<body>
<div id="app">
    <Layout class="main-layout">
        <Header class="layout-header-center">
            <h1>待办事项</h1>
        </Header>
        <Content :style="{padding: '0 250px'}">
            <Card>
                <Row :gutter="16">
                    <i-col span="16" style="padding: 0 90px">
                        <i-input v-model="todomsg" placeholder="请输入待办事项"
                                 @keyup.enter.native="addTodo" :rules="tableRequestValidate"></i-input>
                    </i-col>
                    <i-col span="4" style="text-align: left">
                        <i-button type="primary" long icon="ios-add" @click="addTodo">添加
                        </i-button>
                    </i-col>
                </Row>
            </Card>
            <br>
            <Badge :count="this.items.length">
                <h1>待办</h1>
            </Badge>
            <Card>

                <Row>
                    <i-col >
                        <!-- <List header="Header" footer="Footer" border size="small">
				            <ListItem v-for="item in items" v-bind:class="{finished : item.isFinished}" v-on:click="finishTodo(item)">{{item.label}}</ListItem>
				        </List> -->
                        <ol class="ultodo" style="padding: 0 90px">
                            <li v-for="item in items"
                                v-on:click="finishTodo(item)" :style="" @mouseover="overHilight(event)" @mouseout="outHilight(event)"> {{item.label}}
                            </li>
                        </ol>

                    </i-col>
                </Row>

            </Card>
            <br>
            <h1>已完成</h1>
            <Card>
                <Row >
                    <i-col >
<!--                        <Icon type="md-arrow-round-up" />-->
                        <ol class="ultodo" style="padding: 0 90px">
                            <li v-for="item in finishItems" v-bind:class="{finished : item.isFinished}"
                            @mouseover="overHilight(event)" @mouseout="outHilight(event)"> {{item.label}}&emsp;
                            <i-button type="warning"  icon="ios-redo" title="重做" @click="finishTodo(item)" ghost="true"  ></i-button>
                            &emsp;
                                <Poptip
                                        confirm
                                        title="是否删除当前任务？"
                                        @on-ok="deleteTodo(item)"
                                        @on-cancel="cancelBtn()" style="float: right;">
                                    <i-button type="dashed" title="删除" icon="md-close"  ></i-button>
                                </Poptip>
                            </li>
                        </ol>

                    </i-col>
                </Row>
            </Card>
        </Content>
        <Footer class="layout-footer-center">2020 &copy; timzer</Footer>
    </Layout>

</div>
<script>

    new Vue({
        el: "#app",
        data: {
            redobtn:"redo",
            delbtn:"delete",
            todomsg: '',
            items: JSON.parse(window.localStorage.items == null ? '[]' : window.localStorage.items),
            finishItems: JSON.parse(window.localStorage.finishItems == null ? '[]' : window.localStorage.finishItems),
            tableRequestValidate: {
                todomsg: [
                    {required: true, message: '请输入todo内容', trigger: 'blur'}
                ]
            },
            data: []
        },
        watch: {
            items: {//监听items对象
                handler: function (val, oldval) {
                    localStorage.items = JSON.stringify(this.items);
                },
                deep: true
            },
            finishItems: {//监听finishItems对象
                handler: function (val, oldval) {
                    localStorage.finishItems = JSON.stringify(this.finishItems);
                },
                deep: true
            }
        },
        computed: {},
        methods: {
            addTodo() {
                if (this.todomsg == '') {
                    this.$Notice.error({
                        title:"请填写待办事项！",
                        duration:3
                    });
                    return;
                }
                this.items.push({label: this.todomsg, isFinished: false});
                // localStorage.items = JSON.stringify(this.items);
                this.todomsg = '';
            },
            finishTodo: function (item) {
                item.isFinished = !item.isFinished;//取反
                if (item.isFinished) {
                    this.finishItems.push(item);
                    var index = this.items.indexOf(item);
                    if (index > -1) {
                        //删除item
                        this.items.splice(index, 1);
                    }
                } else {
                    this.items.push(item);
                    // this.finishItems.remove(item);
                    var index = this.finishItems.indexOf(item);
                    if (index > -1) {
                        //删除item
                        this.finishItems.splice(index, 1);
                    }
                }
            },
            confirmDel: function (item) {
                this.$Modal.confirm({
                    title:"确认框",
                    closable:true,
                    content:"是否删除此任务，["+item.label+']',
                    onOk: async() =>{
                        this.deleteTodo(item);
                    }
                });
            },
            deleteTodo: function (item) {

                var index = this.finishItems.indexOf(item);
                if (index > -1) {
                    //删除item
                    this.finishItems.splice(index, 1);
                    this.$Message.success('['+item.label+']，任务已经删除');
                }
            },
            overHilight: function (e){
                e.currentTarget.classList.add("hilight");
            },
            outHilight: function (e){
                e.currentTarget.classList.remove("hilight")
            },
            cancelBtn() {
                this.$Message.info('已取消');
            }
        }
    })
</script>
</body>
</html>
